<template>
    <div id="upload-image" ref="upload-image">
        <el-upload
            class="el-upload"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            show-file-list
            list-type="picture"
            :before-upload="beforeUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!--            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
    </div>
</template>

<script>
export default {
    name: "UploadImage",
    data() {
        return {
            uploadURL: ""
        }
    },
    methods: {
        async beforeUpload() {
            const loading = this.$loading({
                // lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0,0,0,0.7)',
                // target: this.$refs["upload-image"]
            });
            return await this.$axios.get("/8081/index/setTimeOut")
                .then(result => {
                    // console.log("then >>>", result);
                    loading.close();
                    this.$message("开始上传")
                    return true;
                })
                .catch(reason => {
                    // console.log("catch >>>", reason)
                    loading.close();
                    this.$message.error("禁止上传")
                    return false;
                })

        }
    }
}
</script>

<style scoped>

#upload-image {
    /* 让上传组件 el-upload 居中显示 */
    text-align: center
}


</style>
